[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { Canvas } from "@react-three/fiber" import { Galaxy } from "@/components/galaxy" import { Suspense } from "react" import { Loader } from "@/components/loader" export default function Page() { return (

🌌 Explorador Galáctico

Clique em qualquer estrela para explorar seu sistema planetário

Use o mouse para rotacionar a visão

) } [V0_FILE]typescriptreact:file="components/galaxy.tsx" "use client" import { useRef, useState, useMemo } from "react" import { useFrame, useThree } from "@react-three/fiber" import { OrbitControls, Stars, Environment } from "@react-three/drei" import * as THREE from "three" import { StarSystem } from "./star-system" import { EffectComposer, Bloom } from "@react-three/postprocessing" interface StarData { id: number position: [number, number, number] color: string size: number hasSystem: boolean } export function Galaxy() { const [selectedStar, setSelectedStar] = useState(null) const [isZooming, setIsZooming] = useState(false) const { camera } = useThree() const controlsRef = useRef() // Generate galaxy stars in spiral pattern const stars = useMemo(() => { const starArray: StarData[] = [] const arms = 4 const starsPerArm = 50 for (let arm = 0; arm < arms; arm++) { for (let i = 0; i < starsPerArm; i++) { const angle = (arm * Math.PI * 2) / arms + (i / starsPerArm) * Math.PI * 2 const radius = 20 + i * 1.5 + Math.random() * 10 const spread = Math.random() * 8 - 4 const x = Math.cos(angle) * radius + spread const y = (Math.random() - 0.5) * 15 const z = Math.sin(angle) * radius + spread const colors = ["#ffffff", "#ffffaa", "#ffddaa", "#aaddff", "#ffaaaa"] const hasSystem = Math.random() > 0.7 // 30% of stars have planetary systems starArray.push({ id: arm * starsPerArm + i, position: [x, y, z], color: colors[Math.floor(Math.random() * colors.length)], size: 0.3 + Math.random() * 0.5, hasSystem, }) } } return starArray }, []) const handleStarClick = (star: StarData) => { if (!star.hasSystem || isZooming) return setIsZooming(true) setSelectedStar(star) // Animate camera to star const targetPosition = new THREE.Vector3(...star.position) const offset = new THREE.Vector3(0, 5, 15) const finalPosition = targetPosition.clone().add(offset) const startPosition = camera.position.clone() const startTarget = controlsRef.current?.target.clone() || new THREE.Vector3(0, 0, 0) let progress = 0 const duration = 2000 const startTime = Date.now() const animate = () => { const elapsed = Date.now() - startTime progress = Math.min(elapsed / duration, 1) // Easing function const eased = 1 - Math.pow(1 - progress, 3) camera.position.lerpVectors(startPosition, finalPosition, eased) if (controlsRef.current) { const currentTarget = new THREE.Vector3().lerpVectors(startTarget, targetPosition, eased) controlsRef.current.target.copy(currentTarget) controlsRef.current.update() } if (progress < 1) { requestAnimationFrame(animate) } else { setIsZooming(false) } } animate() } const handleReset = () => { setSelectedStar(null) setIsZooming(true) const targetPosition = new THREE.Vector3(0, 50, 100) const targetLookAt = new THREE.Vector3(0, 0, 0) const startPosition = camera.position.clone() const startTarget = controlsRef.current?.target.clone() || new THREE.Vector3(0, 0, 0) let progress = 0 const duration = 2000 const startTime = Date.now() const animate = () => { const elapsed = Date.now() - startTime progress = Math.min(elapsed / duration, 1) const eased = 1 - Math.pow(1 - progress, 3) camera.position.lerpVectors(startPosition, targetPosition, eased) if (controlsRef.current) { const currentTarget = new THREE.Vector3().lerpVectors(startTarget, targetLookAt, eased) controlsRef.current.target.copy(currentTarget) controlsRef.current.update() } if (progress < 1) { requestAnimationFrame(animate) } else { setIsZooming(false) } } animate() } return ( <> {/* Lighting */} {/* Background stars */} {/* Environment for reflections */} {/* Galaxy center glow */} {/* Render all stars */} {!selectedStar && stars.map((star) => handleStarClick(star)} />)} {/* Show selected star system */} {selectedStar && } {/* Post-processing effects */} {/* Camera controls */} ) } interface StarProps { data: StarData onClick: () => void } function Star({ data, onClick }: StarProps) { const meshRef = useRef(null) const [hovered, setHovered] = useState(false) useFrame((state) => { if (meshRef.current) { // Pulsing effect const scale = 1 + Math.sin(state.clock.elapsedTime * 2 + data.id) * 0.2 meshRef.current.scale.setScalar(scale) } }) return ( { e.stopPropagation() if (data.hasSystem) onClick() }} onPointerOver={(e) => { e.stopPropagation() if (data.hasSystem) { setHovered(true) document.body.style.cursor = "pointer" } }} onPointerOut={() => { setHovered(false) document.body.style.cursor = "auto" }} > {/* Glow effect */} {/* Indicator for systems with planets */} {data.hasSystem && ( )} ) } [V0_FILE]typescriptreact:file="components/star-system.tsx" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" import { Html } from "@react-three/drei" import { Button } from "@/components/ui/button" interface StarSystemProps { star: { id: number position: [number, number, number] color: string size: number } onBack: () => void } export function StarSystem({ star, onBack }: StarSystemProps) { const groupRef = useRef(null) // Generate random planetary system const planets = [ { distance: 3, size: 0.3, color: "#8B4513", speed: 1, name: "Rochoso A", moons: 0 }, { distance: 5, size: 0.5, color: "#4169E1", speed: 0.7, name: "Oceânico B", moons: 1 }, { distance: 8, size: 0.8, color: "#FF8C00", speed: 0.5, name: "Gasoso C", moons: 3 }, { distance: 12, size: 0.6, color: "#9370DB", speed: 0.3, name: "Gelado D", moons: 2 }, ] return ( {/* Central Star */} {/* Star corona */} {/* Planets */} {planets.map((planet, index) => ( ))} {/* UI Overlay */}

Sistema Estelar #{star.id}

Estrela tipo{" "} {star.color === "#ffffaa" ? "G (Amarela)" : star.color === "#aaddff" ? "A (Azul)" : "M (Vermelha)"}

{planets.map((planet, i) => (

{planet.name} {planet.moons} lua(s)

))}

) } interface PlanetProps { distance: number size: number color: string speed: number name: string moons: number starColor: string } function Planet({ distance, size, color, speed, moons, starColor }: PlanetProps) { const planetRef = useRef(null) const meshRef = useRef(null) useFrame((state) => { if (planetRef.current) { planetRef.current.rotation.y = state.clock.elapsedTime * speed * 0.2 } if (meshRef.current) { meshRef.current.rotation.y = state.clock.elapsedTime * 0.5 } }) return ( {/* Planet */} {/* Planet atmosphere */} {/* Moons */} {Array.from({ length: moons }).map((_, i) => ( ))} {/* Orbit ring */} ) } interface MoonProps { distance: number size: number speed: number offset: number } function Moon({ distance, size, speed, offset }: MoonProps) { const moonRef = useRef(null) useFrame((state) => { if (moonRef.current) { moonRef.current.rotation.y = state.clock.elapsedTime * speed + offset } }) return ( ) } [V0_FILE]typescriptreact:file="components/loader.tsx" "use client" import { useProgress } from "@react-three/drei" import { useEffect, useState } from "react" export function Loader() { const { progress } = useProgress() const [visible, setVisible] = useState(true) useEffect(() => { if (progress === 100) { const timer = setTimeout(() => setVisible(false), 500) return () => clearTimeout(timer) } }, [progress]) if (!visible) return null return (

🌌

Carregando Galáxia...

{progress.toFixed(0)}%

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@react-three/fiber": "9.4.0", "@react-three/drei": "10.7.6", "three": "0.180.0", "@react-three/postprocessing": "3.0.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This